<template>
  <div class="edit_pass">
    <a-card title="密码修改" :bordered="false" style="width: 600px ;margin-top: 30px;float: right;">
      <div>
        <div class="close">
          <span @click="close">
            <a-icon type="close" />
          </span>
        </div>

        <ul class="pass_box">
          <li>
            <span class="lang_tits">原密码：</span>
            <div class="icon" id="oldPass_title"></div>
            <!-- <a-input  placeholder="请输入原密码" v-model="oldPass"  /> -->
            <a-input-password placeholder="请输入原密码" v-model="oldPass" />
          </li>
          <li>
            <span class="lang_tits">新密码：</span>
            <div class="icon" id="newPass_title"></div>
            <!-- <a-input  placeholder="请输入新密码" v-model="newPass"  /> -->
            <a-input-password placeholder="请输入新密码" v-model="newPass" />
          </li>
          <li>
            <span class="lang_tits">确认密码：</span>
            <div class="icon" id="rePass_title"></div>
            <!-- <a-input  placeholder="请输入确认密码" v-model="rePass"  /> -->
            <a-input-password placeholder="请输入确认密码" v-model="rePass" />
          </li>

          <li>
            <a-button type="primary" @click="sublang">提交</a-button>
          </li>
        </ul>
      </div>
    </a-card>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      oldPass: "",
      oldPassIcon: true,
      newPass: "",
      newPassIcon: true,
      rePass: "",
      rePassIcon: true
    };
  },

  methods: {
    close() {
      this.$parent.xgmm = false;
    },
    sublang() {
      if (!this.oldPass) {
        this.oldPassIcon = false;
        $("#oldPass_title").html("<span>* 原密码不得为空</span>");
      } else {
        var patrn = /^(\w){6,12}$/;
        if (!patrn.test(this.oldPass)) {
          this.oldPassIcon = false;
          $("#oldPass_title").html("<span>* 6-12位数字或字母</span>");
        } else {
          this.oldPassIcon = true;
          $("#oldPass_title").html("");
        }
      }

      if (!this.newPass) {
        this.newPassIcon = false;
        $("#newPass_title").html("<span>* 新密码不得为空</span>");
      } else {
        var patrn = /^(\w){6,12}$/;
        if (!patrn.test(this.newPass)) {
          this.newPassIcon = false;
          $("#newPass_title").html("<span>* 6-12位数字或字母</span>");
        } else {
          this.newPassIcon = true;
          $("#newPass_title").html("");
        }
      }

      if (!this.rePass) {
        this.rePassIcon = false;
        $("#rePass_title").html("<span>* 确认密码不得为空</span>");
      } else {
        if (this.newPass != this.rePass) {
          this.rePassIcon = false;
          $("#rePass_title").html("<span>* 两次密码不一致</span>");
        } else {
          this.rePassIcon = true;
          $("#rePass_title").html("");
        }
      }

      if (this.oldPassIcon && this.newPassIcon && this.rePassIcon) {
        this.axios
          .post(
            "set/modifyPass.php",
            qs.stringify({
              phone: this.$store.state.bbl_phone,
              oldPass: this.oldPass,
              newPass: this.newPass
              // phone:'18392105706',
              // oldPass:'111111',
              // newPass:'123456'
            })
          )
          .then(res => {
            //console.log(res);

            if (res.data.code == 303) {
              this.oldPass = "";
              this.newPass = "";
              this.rePass = "";
              this.$parent.xgmm = false;
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang='less' scoped>
.edit_pass{
  position: fixed;
  z-index: 9999;
  top: 21px!important;
  right: 0;
  .pass_box{
    li{
      margin: 10px 0;
    }
  }
.ant-card {
  text-align: left;
}
.icon {
  color: red;
  float: right;
}
.cdsztks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .ant-input-affix-wrapper {
    width: 65%;
  }

  .cdsz_inps {
    position: relative;
    left: 50%;
    transform: translate(-50%, 20%);
    width: 65%;
    height: 400px;
    background-color: #fff;
    text-align: left;
    // overflow-x: scroll;
    .close {
      width: 100%;
      text-align: right;
      padding: 0 15px;
    }

    .ant-card-head-title {
      text-align: left;
    }

    .ant-btn ant-btn-primary {
          margin-top: 20px;
      float: right;
  
    }
    ul {
      padding: 20px;
      li {
        margin: 20px 20px;

        // .lang_tits {
        //   display: inline-block;
        //   width: 100px;
        //   text-align: left;
        //   margin-bottom: 15px;

        // }

        input {
          width: 500px;
        }
      }
      .fot_btns {
        text-align: center;
      }
    }
  }
}

}
</style>
